<template>
  <div class="contain" @click="speak">
    <div class="card">
      <div class="circle" :style="{ '--clr': color }">
        <img src="@/assets/cocacola_logo.png" class="logo" />
      </div>
      <div class="content">
        <h2>Cocacola</h2>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, modi?
          Enim voluptate odit, optio alias pariatur beatae eaque.
        </p>
        <a href="#">Explore More</a>
      </div>
      <img src="@/assets/cocacola.png" class="product_img" />
    </div>
  </div>
</template>
<script>
import Speech from 'speak-tts'
export default {
  data() {
    return {
      color: '#f40103',
      speech: null,
    }
  },
  mounted() {
    this.speechInit()
  },
  methods: {
    speechInit() {
      this.speech = new Speech()
      this.speech.setLanguage('zh-CN')
      this.speech.init().then(() => {
        console.log('语音播报初始化完成...')
      })
    },

    //语音播报
    speak() {
      this.speech.speak({ text: '八嘎压路' }).then(() => {
        console.log('播报完成...')
      })
    },
  },
}
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
.contain {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #151515;
}
.card {
  position: relative;
  width: 350px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  transition-delay: 0.5s;
}
.card:hover {
  width: 600px;
  transition-delay: 0.5s;
}
.card .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: #191919;
  border: 8px solid var(--clr);
  filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
  transition: 0.5s, background 0.5s;
  transition-delay: 0.75s, 1s;
}
.card:hover .circle::before {
  transition-delay: 0.5s;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--clr);
}
.card .circle .logo {
  position: relative;
  width: 250px;
  transition: 0.5s;
  transition-delay: 0.5s;
}
.card:hover .circle .logo {
  transform: scale(0);
  transition-delay: 0s;
}
.card .product_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(315deg);
  height: 300px;
  transition: 0.5s ease-in-out;
}
.card:hover .product_img {
  transition-delay: 0.75s;
  top: 25%;
  left: 72%;
  height: 500px;
  transform: translate(-50%, -50%) scale(1) rotate(15deg);
}
.card .content {
  position: absolute;
  width: 50%;
  left: 20%;
  padding: 20px 20px 20px 40px;
  opacity: 0;
  transition: 0.5s;
  visibility: hidden;
}
.card:hover .content {
  transition-delay: 0.75s;
  opacity: 1;
  visibility: visible;
  left: 20px;
}
.card .content h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 2.5em;
  line-height: 1em;
}
.card .content p {
  color: #fff;
}
.card .content a {
  position: relative;
  color: #111;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  margin-top: 10px;
}
</style>
